<template>
  <div class="itm" v-for="item in comment" :key="item.commentId">
    <div class="head">
      <a href="/user/home?id=18590405"
        ><img :src="`${item.user.avatarUrl}?param=50y50`"
      /></a>
    </div>
    <div class="cntwrap">
      <div>
        <div class="cnt">
          <a href="/user/home?id=18590405" class="s-fc7">{{ item.user.nickname }}</a>

          ：{{ item.content }}
        </div>
      </div>
      <div class="rp">
        <div class="time s-fc4">{{ item.timeStr }}</div>
        <span class="dlt"
          ><span style="display: none"
            ><a href="javascript:void(0)" class="s-fc3">删除</a
            ><span class="sep">|</span></span
          ></span
        >
        <a href="javascript:void(0)" class="unline"
          ><i class="zan"></i> <i v-if="item.likedCount">({{ item.likedCount }})</i> </a
        ><span class="sep">|</span
        ><a
          href="javascript:void(0)"
          class="s-fc3 unline"
          @mouseup="openReply(item.commentId)"
          >回复</a
        >
      </div>
    </div>
    <div>
      <div class="rept m-quk m-quk-1" v-if="replyId === item.commentId">
        <div class="iner">
          <div class="corr u-arr u-arr-1">
            <em class="arrline arr">◆</em><span class="arrclr arr">◆</span>
          </div>
          <div class="clearfix" style="display: block">
            <div class="holder-parent">
              <textarea
                class="u-txt"
                placeholder=""
                @keyup="watchText"
                :style="`height:${textH}px`"
                v-model="text"
              ></textarea>
            </div>
            <div class="btns">
              <i class="icn u-icn u-icn-36"></i><i class="icn u-icn u-icn-41"></i
              ><a
                href="javascript:void(0)"
                class="u-btn u-btn-1"
                @mouseup="reply(item.commentId)"
                >回复</a
              ><span class="zs s-fc4">{{ numberWords }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
import { replyCommentFn } from "@/api/index.js";

export default {
  name: "CommentBox",
  props: { comment: { type: Array }, info: { tpye: Object } },
  setup() {
    let replyId = ref(0);
    let numberWords = ref(140);
    let textH = ref(20);
    let text = ref(null);
    const store = useStore();
    //  打开回复框
    function openReply(id) {
      if (store.state.Login.loginFlag) {
        if (replyId.value !== id) {
          replyId.value = id;
        } else {
          replyId.value = 0;
        }
        numberWords.value = 140;
        textH.value = 20;
        text.value = null;
      } else {
        store.commit("Login/changeFlag", true);
      }
    }
    //  监测回复框中的字数
    function watchText(e) {
      numberWords.value = 140 - e.target.value.length;
      textH.value = e.target.scrollHeight - 11;
    }
    // 评论
    function reply(id) {
      replyCommentFn(text.value, id).then((response) => {
        if (response.data.code >= 200 && response.data.code < 300) {
          console.log("评论失败");
        } else {
          console.log(response, "成功");
        }
      });
    }

    return {
      replyId,
      openReply,
      watchText,
      numberWords,
      textH,
      reply,
      text,
    };
  },
};
</script>

<style scoped lang="less">
.itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}
.head,
.head img {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
.cntwrap {
  margin-left: 60px;
}
.cnt {
  width: 100%;
  overflow: hidden;
  line-height: 20px;
  word-break: normal;
  .s-fc7 {
    margin-right: 5px;
  }
  .brand-vip {
    margin-right: 5px;
    vertical-align: -1px;
    height: 12px;
  }
  img {
    vertical-align: middle;
  }
}
.rp {
  margin-top: 15px;
  text-align: right;
}
.time {
  float: left;
  margin: 0 !important;
}
.dlt {
  display: none;
}
.sep {
  margin: 0 8px;
  color: #ccc;
}
.zan {
  display: inline-block;
  margin-top: -4px;
  margin-right: 5px;
  width: 15px;
  height: 14px;
  vertical-align: -2px;
  background: url("../../common/images/icon2.png") no-repeat -150px 0;
}
.u-page {
  margin: 20px 0;
  text-align: center;
}
.comm-f {
  padding: 20px 0 0 0;
  display: flex;
  justify-content: center;
}
.m-quk {
  position: relative;

  margin: 15px 0 15px 60px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  .iner {
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid #fcfcfc;
    border-radius: 2px;
    .corr {
      position: absolute;
      top: -8px;
      right: 5px;
      width: 14px;
      height: 14px;
      overflow: hidden;
      .arrline {
        color: #d9d9d9;
      }
      .arr {
        display: block;
        font-family: "SimSun";
        font-size: 15px;
        font-style: normal;
        font-weight: normal;
        height: 10px;
        line-height: normal;
      }
      .arrclr {
        margin: -9px 0 0;
        color: #f8f8f8;
      }
    }
  }
}
.holder-parent {
  position: relative;
  padding-right: 14px;
  zoom: 1;
}
textarea.u-txt {
  width: 100%;
  margin-right: -20px;
  margin: 0;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
  box-sizing: content-box;
  height: 20px;
}
textarea {
  overflow: hidden;
}
.btns {
  position: relative;
  clear: both;
  padding-top: 10px;
  .icn {
    float: left;
    margin: 0px 10px 0 0;

    cursor: pointer;
  }
  .zs {
    float: right;
    margin-right: 10px;
    line-height: 25px;
  }
}
.u-icn-36 {
  width: 18px;
  height: 18px;
  background-position: -40px -490px;
}
.u-icn-41 {
  width: 18px;
  height: 18px;
  background-position: -60px -490px;
}
.u-btn-1 {
  float: right;
  width: 46px;
  height: 25px;
  background-position: -84px -64px;
  color: #fff;
  text-align: center;
  line-height: 25px;
}
</style>
